<template>
  <div>
    <el-container>
      <el-header>
        后台管理系统
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width='flag ? "64px" : "200px"' id="aside">
          <div class="head-menu"  @click="flag=!flag">|||</div>
          <el-menu
          
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse='flag'
            :collapse-transition='false'
            router
          >
            <!-- 没有二级菜单 -->
            <el-menu-item index="/admin/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!-- 带二级菜单 -->
            <el-submenu :index="item.id.toString()" v-for="(item,index) in menus" :key="item.id">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item
                :index="`/admin/${el.path}`"
                v-for="(el,ind) in item.children"
                :key="ind"
              >
                <i class="el-icon-menu"></i>
                <span slot="title">{{el.authName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 面包屑 -->
         <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/index' }"></el-breadcrumb-item>
      
      
    </el-breadcrumb>

          <div class="content">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse:false,
      menus: [], //菜单栏
      icons: [
        "el-icon-user-solid",
        "el-icon-menu",
        "el-icon-s-goods",
        "el-icon-s-order",
        "el-icon-pie-chart"
      ],
      flag:false
    };
  },
  mounted() {
    //调用获取菜单栏的数据
    this.getMenus();
    console.log(this.$route.matched);
    
  },
  methods: {
    logout() {
      this.$confirm("你确定要退出登录吗？", "退出", {
        type: "warning"
      })
        .then(() => {
          this.$store.commit("logout");
        })
        .catch(() => {
          this.$message("你已经取消退出登陆了");
        });
    },
    //获取左侧菜单的方法
    getMenus() {
      let url = this.$store.state.baseUrl; //请求接口的地址
      this.$axios.get(`${url}menus`).then(res => {
        console.log(res);
        this.menus = res.data;
      });
    },
    //点击菜单折叠功能
    changeMenu(){
      this.isCollapse = !this.isCollapse;

     
    }
  }
};
</script>

<style lang="scss" >
.el-header {
  background-color: #373d40;
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 60px;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
}

.el-aside {
  background-color: #333744;
  color: #fff;
 
  /* line-height: 200px; */
  min-height: 662px;
  .el-menu{
    border-right: none;
  }
  .head-menu{
    width: 100%;
    line-height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
  }
 
}

.el-main {
  background-color: #f0f0f0;
  // color: #333;
  // line-height: 160px;
  width: 100%;
  min-height: 500px;
}
.content{
  background: #FFF;
  padding: 10px;
  border: #dddddd 1px solid;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba($color: #808080, $alpha: .8);
  margin-top: 20px;
}
.el-breadcrumb{
  margin-bottom: 30px;
}
</style>
